<template>
    <div>
        <div>          
            <el-input class="searchInput" 
                    clearable
					@clear="keywordClear"
                    v-model="keyword"
                    placeholder="搜索合作基地..."
                    @keydown.enter.native="doSearch"
                    prefix-icon="el-icon-search">
            </el-input>
            <el-button icon="el-icon-search" type="primary" @click="doSearch">搜索</el-button> 
        </div>
        <div class="baseMain">
            <el-table
                    :data="allotBases"
                    border
                    stripe
                    style="width:49%">
                <el-table-column
                    prop="name" label="公司名字" width="260">
                </el-table-column>
				<el-table-column
					prop="city" label="所在城市" width="80"></el-table-column>
                <el-table-column
                    label="指导教师" width="100">
                    <template slot-scope="scope">
                        <el-button @click="showTeacherView(scope.row)" type="primary">查看</el-button>
                    </template>
                </el-table-column>
				<el-table-column label="实习学生" width="100">
					<template slot-scope="scope">
						<el-button @click="showStudentView(scope.row)" type="primary">查看</el-button>
					</template>
				</el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button @click="doDelete(scope.row)" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
                <el-pagination
                        background
						@current-change="handleCurrentChange"
						:current-page="current"
						:page-size="size"
                        layout="prev, pager, next, total"
                        :total="total">
                </el-pagination>
        </div>
        <el-dialog :title="title" :visible.sync="dialogTeacherVisible" width="50%">
            <div>
                <el-table   
						:data="allotedTeacher"
						stripe
						border>
					<el-table-column
							prop="jobId" label="工号" width="130">
					</el-table-column>
					<el-table-column
							prop="name" label="姓名" width="70">
					</el-table-column>
					<el-table-column
							prop="gender" label="性别" width="60">
					</el-table-column>
					<el-table-column
							prop="jobTitle" label="职称" width="80">
					</el-table-column>
					<el-table-column
							prop="email" label="邮箱" width="180">
					</el-table-column>
					<el-table-column
							prop="telephone" label="电话">
					</el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogTeacherVisible = false" type="primary">确 定</el-button>
            </span>    
        </el-dialog>
		<el-dialog :title="title" :visible.sync="dialogStudentVisible" width="50%">
			<div>
			    <el-table   
			            :data="allotedStudent"
			            stripe
			            border>
			        <el-table-column
			                prop="studentId" label="学号" width="130">
			        </el-table-column>
			        <el-table-column
			                prop="sname" label="姓名" width="80">
			        </el-table-column>
			        <el-table-column
			                prop="gender" label="性别" width="60">
			        </el-table-column>
			        <el-table-column
			                prop="mname" label="专业" width="150">
			        </el-table-column>
			        <el-table-column
			                prop="level" label="学级" width="60">
			        </el-table-column>
			        <el-table-column
			                prop="cname" label="班级" width="90">
			        </el-table-column>
			        <el-table-column
			                prop="telephone" label="电话">
			        </el-table-column>
			    </el-table>
			    <div class="allotPage">
			        <el-pagination
			            @current-change="currentChange"
			            :current-page="current2"
			            :page-size="size2"
			            layout="total, prev, pager, next"
			            :total="total2">
			        </el-pagination>
			    </div>
			</div>
			<span slot="footer" class="dialog-footer">
			    <el-button @click="dialogStudentVisible = false" type="primary">确 定</el-button>
			</span> 
		</el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                keyword: '',
                allotBases:[],
                total: 0,
                size: 10,
                current: 1,
				total2: 0,
				size2: 5,
				current2: 1,
                title: '',
                dialogTeacherVisible: false,
                dialogStudentVisible: false,
				bid: 0,
                allotedTeacher:[],
                allotedStudent:[],
            }
        },
		mounted() {
			this.initAllotBases();
		},
        methods:{
			initAllotBases(){
				let url = '/practice/allot/allot_bases/?current=' + this.current + '&size=' + this.size + '&keyword=' + this.keyword;
				this.getRequest(url).then(resp => {
					if(resp){
						this.allotBases = resp.data;
						this.total = resp.total;
					}
				})
			},
			initBaseTeacher(){
				this.getRequest('/practice/allot/baseTeacher/' + this.bid).then(resp => {
					if(resp) {
						this.allotedTeacher = resp;
					}
				})
			},
			initBaseStudent(){
				let url = '/practice/allot/base_student/' + this.bid +'?current=' + this.current2 + '&size=' + this.size2;
				this.getRequest(url).then(resp => {
					if(resp){
						this.allotedStudent = resp.data;
						this.total2 = resp.total;
					}
				})
			},
			keywordClear(){
				this.current = 1;
				this.initAllotBases();
			},
            doSearch(){
				this.current = 1;
				this.initAllotBases();
            },
            showTeacherView(val){
				this.title = '教师信息';
				this.bid = val.id;
				this.initBaseTeacher();
				this.dialogTeacherVisible = true;
			},
			showStudentView(val){
				this.title = '实习学生信息';
				this.bid = val.id;
				this.initBaseStudent();
				this.dialogStudentVisible = true;
			},
            handleCurrentChange(page){
				this.current = page;
				this.initAllotBases();
            },
			currentChange(page){
				this.current2 = page;
				this.initBaseStudent();
			},
			doDelete(val){
				this.$confirm('此操作将删除【' + val.name + '】实习计划, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRequest("/practice/allot/delete/" + val.id).then(resp => {
						if (resp) {
							this.initAllotBases();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
        },
    }
</script>

<style scoped>
	.searchInput{
		width: 300px;
		margin-right: 8px;
	}
	.baseMain{
		margin-top: 10px;
	}
	.page{
		width: 49%;
		display: flex;
		justify-content: flex-end;
		margin-top: 5px;
	}
	.allotPage{
		display: flex;
		justify-content: flex-end;
		margin-top: 5px;
	}
	.selectChoice{
		margin-bottom: 5px;
	}


</style>